<template>
  <div class="form_layout">
    <div class="body vertical center body_sec">
      <nut-form label-position="top" ref="formRef" class="">
        <!-- 选择类型 -->
        <nut-form-item class="yh_item" label="选择类型">
          <div class="select_dis">
            <nut-menu>
              <nut-menu-item
                v-model="form.discount"
                :options="typeList"
                @change="clickChoose"
              />
            </nut-menu>
          </div>
        </nut-form-item>

        <!-- 牌局名称 -->
        <nut-form-item class="last_item" label="牌局名称">
          <nut-input
            @blur="inputBlur"
            @input="validateInput"
            v-model.trim="form.amount"
            placeholder="请输入牌局名称"
          />
        </nut-form-item>

        <!-- 选择玩法 -->
        <div class="play_mode" v-if="form.discount === 1">
          <label class="play_mode__label">选择玩法</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': selectedMode === mode.label }"
              @click="mode.enabled ? selectMode(mode) : ''"
            >
              <span>{{ mode.label }}</span>
              <div class="play_mode_lock play_mode__item--disabled" v-if="!mode.enabled">
                <img src="/imgs/club/lock_icon.png" class="play_mode__lock_icon" />
              </div>
            </div>
          </div>
        </div>

        <!-- 买入限制 -->
        <nut-form-item class="last_item" v-if="form.discount === 1" label="买入限制">
          <nut-input
            @blur="inputBlur"
            @input="validateInput"
            v-model.trim="form.amount"
            placeholder="请输入金额下限"
          />
          <div class="h"></div>
          <nut-input
            @blur="inputBlur"
            @input="validateInput"
            v-model.trim="form.amount"
            placeholder="请输入金额上限"
          />
        </nut-form-item>

        <!-- 最低携带金额 -->
        <nut-form-item class="last_item" v-if="form.discount === 2" label="最低携带金额">
          <div class="play_mode1">
            <div class="play_mode__container">
              <div
                v-for="mode in modes1"
                :key="mode.label"
                class="play_mode__item"
                :class="{ 'play_mode__item--active': selectedMode1 === mode.label }"
                @click="selectMode1(mode)"
              >
                <span>{{ mode.label }}</span>
              </div>
            </div>
          </div>
          <nut-input
            @blur="inputBlur"
            @input="validateInput"
            v-model.trim="form.amount"
            placeholder="请输入"
          />
          <ul class="slider_labels">
            <li class="item" v-for="(item, index) in sliderLabels" :key="index">{{ item }}</li>
          </ul>
          <nut-range v-model="val" hidden-range inactive-color="#1D1C3C"  active-color="#9E1EFF" @change="change">
            <template #button>
              <div class="range_button"></div>
            </template>
          </nut-range>
        </nut-form-item>

        <!-- 盲注/低注 -->
        <nut-form-item class="last_item" :label="form.discount === 1 ? '盲注' : '低注'">
          <nut-input
            @blur="inputBlur"
            @input="validateInput"
            v-model.trim="form.amount"
            :placeholder="form.discount === 1 ?'请输入盲注' : '请输入低注'"
          />
          <ul class="slider_labels">
            <li class="item" v-for="(item, index) in sliderLabels" :key="index">{{ item }}</li>
          </ul>
          <nut-range v-model="val" hidden-range inactive-color="#1D1C3C"  active-color="#9E1EFF" @change="change">
            <template #button>
              <div class="range_button"></div>
            </template>
          </nut-range>
        </nut-form-item>

        <!-- 每桌人数 -->
        <div class="play_mode">
          <label class="play_mode__label">每桌人数</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes1"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active1': selectedMode1 === mode.label }"
              @click="selectMode1(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>

        <!-- 开局盲注数量 -->
        <div class="play_mode1" v-if="form.discount === 1">
          <label class="play_mode__label">开局盲注数量</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes2"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': selectedMode2 === mode.label }"
              @click="selectMode2(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>

        <!-- 输赢规则  -->
        <div class="play_mode1" v-if="form.discount === 2">
          <label class="play_mode__label">输赢规则 </label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes2"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': selectedMode2 === mode.label }"
              @click="selectMode2(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>
        
        <!-- 限注规则 -->
        <div class="play_mode1" v-if="form.discount === 1">
          <label class="play_mode__label">限注规则</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes3"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': selectedMode3 === mode.label }"
              @click="selectMode3(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>

        <div class="settings">
          <!-- 全下保险功能 -->
          <div class="settings__item" v-if="form.discount === 1">
            <span class="settings__label">全下保险功能</span>
            <nut-switch 
              v-if="insuranceEnabledOption.value === 'check'" 
              v-model="insuranceEnabled" 
              active-color="#1DBA8B" 
              inactive-color="#504F6F">
            </nut-switch>
          </div>
          <!-- 多次发牌 -->
          <div class="settings__item" v-if="form.discount === 1">
            <span class="settings__label">多次发牌</span>
            <nut-switch 
              v-if="multiDealOption.value === 'check'" 
              v-model="multiDealEnabled" 
              active-color="#1DBA8B" 
              inactive-color="#504F6F">
            </nut-switch>
          </div>
          <!-- 其他规则 -->
          <div class="settings__group">
            <span class="settings__label">其他规则</span>
            <div class="settings__options">
              <label class="settings__option">
                <input type="checkbox" v-model="gpsRestricted" />
                <span>限制GPS和同IP</span>
              </label>
              <label class="settings__option">
                <input type="checkbox" v-model="disableEmulator" />
                <span>禁用模拟器</span>
              </label>
            </div>
          </div>
        </div>  
        
        <!-- 按钮 -->
        <div class="btn_zone flex">
          <nut-button
            class="submit_btn button_color pointer"
            :disabled="loading"
            block
            @click="onSubmit"
          >
            提交
          </nut-button>
        </div>   
      </nut-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
// import { useI18n } from "vue-i18n";
import { verifyNumberComma } from "@/utils/publicMethods";

// const { t } = useI18n();


const typeList = [
  { text: '德州', value: 1 },
  { text: '短牌', value: 2 },
];

const dataParams = {
  // country: 1,
  method: -1,
  discount: 1,
  amount: '',
  bank: null,
  bankMethod: 100, 
  network_type: "", 
};

const form = ref(
  // 存款表单提交
  { ...dataParams }
);

const loading = ref(false); // 是否提交中


const clickChoose = (item: any) => {
  form.value.discount = item;
};

const inputBlur = () => {
  form.value.amount = verifyNumberComma(String(form.value.amount));
};
// 限制只能输入输入数字
const validateInput = () => {
  // isShowError.value = form.value.amount < countMinMax().min;
  form.value.amount = form.value.amount.replace(/[^0-9]/g, "");
};

// 模式列表

const modes = ref([
  { label: '经典', enabled: true },
  { label: '短牌', enabled: true },
  { label: '奥马哈', enabled: false },
  { label: '德州', enabled: false },
  { label: '无限注', enabled: false },
]);

// 默认选中经典
const selectedMode = ref('经典');

// 点击选择玩法
const selectMode = (mode: { label: string; enabled: boolean }) => {
  console.log('mode', mode)
  if (!mode.enabled) {
    return;
  }
  selectedMode.value = mode.label;
};

const sliderLabels = ref<number[]>([]); // 动态标签数据
const val = ref(0)
const minValue = ref(0)
const maxValue = ref(0)

// 模拟动态获取数据
const fetchSliderLabels = () => {
  return new Promise<number[]>((resolve) => {
    setTimeout(() => {
      resolve([10, 20, 50, 100, 200, 500, 1000]);
    }, 1000);
  });
};

// 初始化数据
const initSliderData = async () => {
    const labels = await fetchSliderLabels();
    sliderLabels.value = labels;
    minValue.value = Math.min(...sliderLabels.value);
    maxValue.value = Math.max(...sliderLabels.value);
    val.value = minValue.value;
};



// 滑块变动时，根据比例获取对应的索引和值
const change = (value: number) => {
  console.log('value =====', value)
  console.log('maxValue.value =====', maxValue.value)
  console.log('amount =====',  maxValue.value * (value / 100)  )
  // form.value.amount  = String(value / maxValue.value)
  // const stepCount = sliderLabels.value.length - 1; // 总步数
  // console.log('stepCount==', stepCount)
  // const stepSize = (maxValue.value - minValue.value) / stepCount; // 每一步的值区间
  // console.log('stepSize==', stepSize)
  // const index = Math.round((value - minValue.value) / stepSize); // 根据当前值计算索引
  // const currentLabel = sliderLabels.value[index]; // 当前值
  // console.log('当前索引:', index);
  // console.log('当前值:', currentLabel);
};


// 默认选中经典
const selectedMode1 = ref('');
// 桌人数
const modes1 = ref([
  { label: '6', enabled: true },
  { label: '9', enabled: true },
]);

// 点击选择桌人数
const selectMode1 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    // ElMessage.info('暂未开放，尽情期待');
    return;
  }
  selectedMode1.value = mode.label;
};

// 默认选中开局盲注数
const selectedMode2 = ref('');
// 桌人数
const modes2 = ref([
  { label: '1小盲+1大盲+1随机大盲注', enabled: true },
  { label: '1小盲+1大盲+每人1大盲', enabled: true },
  { label: '1小盲+1大盲', enabled: true },
]);
// 点击选择开局盲注数
const selectMode2 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    // ElMessage.info('暂未开放，尽情期待');
    return;
  }
  selectedMode2.value = mode.label;
};

// 默认选中开局盲注数
const selectedMode3 = ref('');
// 桌人数
const modes3 = ref([
  { label: '限注', enabled: true },
  { label: '底池限注', enabled: true },
  { label: '无限限注', enabled: true },
  { label: 'All in 模式', enabled: true },
]);
// 点击选择开局盲注数
const selectMode3 = (mode: { label: string; enabled: boolean }) => {
  if (!mode.enabled) {
    // ElMessage.info('暂未开放，尽情期待');
    return;
  }
  selectedMode3.value = mode.label;
};

const insuranceEnabled = ref(false); // 是否启用全下保险
const multiDealEnabled = ref(false); // 是否启用多次发牌
const gpsRestricted = ref(false); // 限制 GPS 和同 IP
const disableEmulator = ref(false); // 禁用模拟器

// 用于判断是否显示开关的选项
const insuranceEnabledOption = ref({ value: 'check' });
const multiDealOption = ref({ value: 'check' });

const onSubmit = () => {
  handleSubmit();
};

const handleSubmit = () => {

}

onMounted(() => {
  initSliderData();
});

onBeforeUnmount(() => {
});
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.r_color {
  color: #e43939;
}

.popup_body {
  .form_card {
    padding: 24px 20px !important;
  }
  .body {
    color: #fff;
    //padding: 24px 20px;
    flex-wrap: wrap;
    justify-content: space-between;

    .ex_list_item {
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      width: 88px;
      height: 88px;
      background: #1d1c3c;
      border-radius: 8px;

      &:nth-child(n + 4) {
        margin-top: 20px;
      }

      .icon {
        width: 100%;
        text-align: center;

        img {
          width: 36px;
          height: 36px;
        }
      }
    }
  }
}

.form_layout {
  color: #fff;

  .body {
    padding: 24px 14px;

    form {
      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;
          &.last_item {
            margin-bottom: 10px;
            .h {
              margin-bottom: 10px;
            }

            .slider_labels {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;

              .item {
                color: #A8A8CA;
                font-size: 12px;
                font-weight: 400;
              }
            }
            .nut-range-container {
              width: 95%;
              height: 8px;
              margin: 0 auto;
            }
          }
          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              padding-bottom: 8px;
              color: #fff;
              font-size: 14px;
              // font-weight: 500;
            }
            .nut-input,
            .select_dis {
              width: 100%;
              background: #1d1c3c;
              border: 1px solid #333260;
              box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
              border-radius: 8px;
              padding: 9px 10px;

              .s-icon {
                width: 24px;
                height: 24px;
                background: url(/imgs/inputSuffix.webp) center no-repeat;
                background-size: 100%;
                transition: 0.3s;
              }

              &.active {
                .s-icon {
                  transform: rotate(180deg);
                }
              }
              .nut-menu__title-text {
                padding: 0;
              }
            }

            .usdt_box {
              justify-content: space-between;
              margin-top: 10px;

              .button {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }

  .body_sec {

    .yh_item {
      :deep(.n-form-item-blank) {
        display: block;
      }

      .choose_yh {
        font-size: 14px;
        color: #fff;
        min-height: 100px;
        padding: 10px;
        background: #1d1c3c;
        border-radius: 0 0 8px 8px;

        > div {
          margin-bottom: 5px;
        }
      }

      :deep(.nut-menu) {
        .nut-menu__bar {
          background: transparent !important;
        }

        .nut-icon {
          color: #a8a8ca;
        }
      }
    }
    .play_mode {
      // margin-top: 20px;

      .play_mode__label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode__container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode__item {
        width: calc(33.33% - 10px);
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        font-size: 14px;
        color: #A8A8CA;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        flex: 0 0 calc(33.33% - 10px);

        &--active {
          background: linear-gradient(89deg, #68B1FF -5.33%, #1F6BDE 84.84%), linear-gradient(170deg, #AAD3FF 21.77%, #75ACFF 74.41%), var(---, #1D1C3C);
          box-shadow: 0.5px 0.5px 1px 0px #5AA4FF inset;
          color: #fff;
        }
        &--active1 {
          background: var(---, linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%));
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          color: #fff;
        }

        &--disabled {
          background: rgba(90, 90, 90, .5);
          color: #A8A8CA;
          cursor: not-allowed; /* 禁用时显示禁用状态 */
        }
      }
      .play_mode_lock {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);

        .play_mode__lock_icon {
          width: 24px;
          height: 24px;
          font-size: 16px;
          vertical-align: middle;
        }
      }
      
    }

    .play_mode1 {
      // margin-top: 20px;

      .play_mode__label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode__container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode__item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        color: #A8A8CA;
        font-size: 14px;
        font-weight: 400;
        padding: 0 24px;

        &--active {
          background: var(---, linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%));
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          color: #fff;
        }
      }
    }

    .settings {
      display: flex;
      flex-direction: column;
      gap: 16px;
      color: #fff;

      &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &__label {
        font-size: 14px;
      }

      &__toggle {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;

        input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        &__switch {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          border-radius: 20px;
          transition: background-color 0.3s;

          &::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s;
          }
        }

        input:checked + &__switch {
          background-color: #3b82f6;

          &::before {
            transform: translateX(14px);
          }
        }
      }

      &__group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      &__options {
        display: flex;
        gap: 16px;

        &__option {
          display: flex;
          align-items: center;
          gap: 8px;

          input[type="checkbox"]:checked {
            accent-color: #3b82f6;
          }
          
          :deep(input[type="checkbox"]) {
            /* 隐藏默认样式 */
            appearance: none;
            width: 16px;
            height: 16px;
            margin: 0;
            border: 1px solid white; /* 默认边框为白色 */
            background-color: transparent; /* 默认背景为透明 */
          }
        }
      }
    }

    .btn_zone {
      .submit_btn {
        margin: 32px auto 8px;
        border: 0;
        width: 319px;
        height: 44px;
        color: #fff;
        border-radius: 8px;

        &.fixed_bg {
          background-size: 100% 112%;
        }
      }
    }

    // .slider_container {
    //   position: relative;
    //   width: 100%;
    //   height: 40px;
    //   border-radius: 8px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: flex-start;

    //   .slider {
    //     width: 100%;
    //     height: 6px;
    //     background: linear-gradient(90deg, #7b5cf5, #9e41e5);
    //     border-radius: 3px;
    //     position: relative;

    //     .slider_labels {
    //       display: flex;
    //       justify-content: space-between;
    //       position: absolute;
    //       width: 100%;
    //       top: 10px;
    //       z-index: 96;
    //     }

    //     .slider_underline {
    //       position: absolute;
    //       bottom: 0;
    //       left: 0;
    //       z-index: 99;
    //       width: 100%;
    //       height: 2px;
    //       background-color: #9e41e5;
    //       opacity: 0.3;
    //     }

    //     .slider_thumb {
    //       position: absolute;
    //       width: 20px;
    //       height: 20px;
    //       background-color: white;
    //       border-radius: 50%;
    //       border: 3px solid #9e41e5;
    //       top: 50%;
    //       transform: translateY(-50%);
    //       cursor: pointer;
    //       transition: background-color 0.3s ease;
    //     }

    //     .slider_thumb:hover {
    //       background-color: #7b5cf5;
    //     }
    //   }
    // }
  }
}

// 选择优惠
:deep(.nut-overlay) {
  top: 15px;
  background: rgba(0, 0, 0, 0.1);
}

:deep(.nut-menu) {
  .nut-popup {
    width: 347px;
    left: 14px;
    top: 15px;
    background: #1d1c3c;
    border-radius: 8px;

    * {
      color: #fff;
    }
    .nut-menu-item__content {
      padding: 0;
      .nut-menu-item__option {
        height: 48px;
        padding: 0 14px;
        border-bottom: 0.5px solid #333260;
        &.active {
          background: #333260;
        }
      }
    }
  }
}

// 成功提示弹窗
.popup_body {
  color: #fff;
  .form_card {
    padding: 16px 20px;
    color: #c0c2db;
    font-size: 13px;
    text-align: center;
  }

  .submit_confirm {
    width: 307px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
  }
}

.custom_mark {
  color: white;
  font-size: 12px;
  text-align: center;
  display: inline-block;
  width: 30px;
  transform: translateX(-50%);
}

.range_button {
  width: 16px;
  height: 16px;
  background: url(/imgs/club/rangeBtn.png) no-repeat;
  background-size: contain;
}
:deep(.nut-range::before) {
  background: none;
}
</style>